const path = require('path')

const isDev = process.env.NODE_ENV === 'development'
const isProd = process.env.NODE_ENV === 'production'

const minify = isDev
	? false
	: {
			collapseWhitespace: true,
			removeComments: true,
			removeRedundantAttributes: true,
			removeScriptTypeAttributes: true,
			removeStyleLinkTypeAttributes: true,
			useShortDoctype: true,
			minifyCSS: true,
			minifyJS: true,
	  }

function resolve(dir) {
	return path.join(__dirname, dir)
}

module.exports = {
	publicPath: isProd ? '/form-generator/' : '/',
	pages: {
		index: {
			entry: 'src/views/index/main.js',
			template: 'public/index.html',
			filename: 'index.html',
			chunks: ['chunk-vendors', 'chunk-common', 'index'],
			minify,
		},
		preview: {
			entry: 'src/views/preview/main.js',
			template: 'public/preview.html',
			filename: 'preview.html',
			chunks: ['chunk-vendors', 'chunk-common', 'preview'],
			minify,
		},
	},
	devServer: {
		overlay: true, // 保持错误覆盖层以快速定位问题
		open: true, // 自动打开浏览器
		port: 8080, // 设置本地开发端口
		hot: true, // 启用热更新
	},
	// productionSourceMap: process.env.NODE_ENV === 'development',
	configureWebpack: {
		devtool: isDev ? 'source-map' : '', // 为开发环境生成 Source Map
		externals: {
			vue: 'Vue',
			'vue-router': 'VueRouter',
			'element-ui': 'ELEMENT',
		},
	},
	chainWebpack(config) {
		// set svg-sprite-loader
		config.module.rule('svg').exclude.add(resolve('src/icons')).end()
		config.module
			.rule('icons')
			.test(/\.svg$/)
			.include.add(resolve('src/icons'))
			.end()
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			.options({
				symbolId: 'icon-[name]',
			})
			.end()
	},
}
